<template>
  <div>
    <p>1. 测试 v-once</p>
    <p>{{count}}</p>
    <p v-once>{{count}}</p>
    <hr>

    <p>2. 缩写使用</p>
    <p>2.1. v-on 缩写为 @</p>
    <div><button v-on:click="addCountHandler">点击更改count</button></div>
    <div><button @click="addCountHandler">v-on可以用@简写</button></div>

    <p>2.2. v-bind 缩写为 :</p>
    <p><a v-bind:href="link">百度</a></p>
    <p><a :href="link">百度2</a></p>
    <hr>

    <p>3. 变更方法</p>
    <div>
      <ul>
        <li v-for="(item, index) in names" :key="index">{{item}}</li>
      </ul>
    </div>
    <div><button @click="addNames">点击添加名字</button></div>
    <br>

    <div>
      <ul>
        <li v-for="(value, name, index) in obj" :key="index">{{name}}:{{value}}</li>
      </ul>
    </div>
    <div><button @click="addItemOfObj">点击添加属性</button></div>

    <p>4. 测试计算属性</p>
    <p>{{msg.split("").reverse().join("")}}</p>
    <p>{{getMsg}}</p>
    <p>ps：methods可以实现跟computed相同的效果，不同的是，<b>计算属性是基于它们的响应式依赖进行缓存的。</b></p>
    <hr>

    <p>5. Class与Style绑定</p>
    <p class="s1" :class="{active:isActive, textDanger:isDanger}">hello color</p>
    <button @click="changeActive">更改颜色</button>

    <p class="s2" :class="[c1, c2]">测试class 数组形式</p>
    <p class="s3" :class="[isActive ? c1 : 'c1notexist', c2]">测试class 数组形式 三元运算符</p>
    <p class="s4" :class="[{active:isActive, textDanger:isDanger}, c2]">数组嵌套对象</p>
    <hr>

    <p>6. 内联样式</p>
    <p :style="{color: 'red', fontWeight: 700}">对象语法style</p>
    <p :style="[style1, style2]">数组语法style</p>








  </div>

</template>

<script>
    export default {
      name: "ApiDemo01",
      data() {
        return {
          count: 10,
          link: "http://www.baidu.com",
          names: ["林青霞", "张曼玉", "柳岩", "刘诗诗"],
          obj: {
            name: "张三",
            age: 19
          },
          msg: "hello",
          isActive: false,
          isDanger: true,
          c1: "csss01",
          c2: "csss02",
          style1: {
            color: "red",
            fontSize: "30px"
          },
          style2: {
            fontWeight: 700
          }
        }
      },
      methods: {
        addCountHandler() {
          this.count++;
        },
        addNames() {
          // this.names.push("刘亦菲");
          let arr = ["刘亦菲", "安以轩"];
          this.names = this.names.concat(arr);
        },
        addItemOfObj() {
          this.$set(this.obj, "sex", "男");
        },
        changeActive() {
          this.isActive = !this.isActive;
        }
      },
      computed: {
        getMsg() {
          return this.msg.split("").reverse().join("");
        }
      }
    }
</script>

<style>
  .active {
    color: red;
    font-weight: 700;
  }
</style>

